<!-- 缺陷的严重程度组件 -->
<template>
<div style="width: 100%; height: auto;text-align: center;">
		<div style="color: #737373;">
				项目
				<el-select clearable filterable v-model="conditions.projectId"
					@change="loadData()" placeholder="请选择项目">
					<el-option v-for="(project) in projects" :label="project.projectName" :value="project.projectId">
					</el-option> 
				</el-select>
				登记时间
				<el-date-picker type="date" placeholder="选择开始日期" value-format="timestamp" v-model="conditions.startTime" style="width: 20%;"></el-date-picker>
				<el-date-picker type="date" placeholder="选择结束日期" value-format="timestamp" v-model="conditions.endTime" style="width:20%;"></el-date-picker>
				<el-button type="primary" @click="loadData()">查询</el-button>
				<el-button @click="clearQuery()">清空</el-button>
				<el-button @click="exportChart()">导出</el-button>
		</div>
		<div id="chart" style="width: 800px; height: 600px;position: relative;left: 50%;margin-left: -400px;">
			
		</div>
	</div>
</template>

<script>
export default {
  name: 'report-severity',
  data(){
  	return{
  		conditions:{
  			projectId: null,
  			projectName: null,
  			startTime: null,
  			endTime: null
  		},
  		projects:[],
  		returnData:[],
  		sum:0
  	}
  },
  	
  methods:{
	  
	  	pie(){
	  		//基于dom 创建echarts实例 
	  		// console.log(document.getElementById("chart"));
	  		let mychart =this.$echarts.init(document.getElementById("chart"));
	  		//绘制图表
	  		mychart.setOption({
	  			tooltip: {
	  				trigger: 'item'
	  			},
	  			legend: {
	  			   top: '27%',
	  			   left: 'right',
	  			   orient: 'vertical',
	  			       itemGap: 10, //小图间距
	  			       itemHeight: 20,//小图高度
	  			   // padding:[150,10,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
	  			},
	  			title:{
	  				text:"缺陷分类占比",
	  				left:"center",
	  				// top:20,
	  				},
	  			series:[
	  				{
	  				type:'pie',
	  				radius: ['30%', '65%'],
	  				avoidLabelOverlap: false,
	  				
	  				emphasis: {
	  				        label: {
	  				          show: true,
	  				          fontSize: '20',
	  				          fontWeight: 'bold'
	  				        }
	  				      },
	  				itemStyle: {
	  				        borderRadius: 10,
	  				        borderColor: '#fff',
	  				        borderWidth: 2
	  				      },
	  				label: {
	  				        show: false,
	  				        position: 'center'
	  				      },	
	  				labelLine: {
	  					show: false
	  				},
	  				data:this.returnData,
	  				}
	  			]
	  		});
	  	},
	  	//导出图表
	  	exportChart(){
	  		var chart= this.$echarts.init(document.getElementById("chart"));
	  		var result=chart.getDataURL({
	  			type:'png',
	  			pexelRatio:2,
	  			backgroundColor:'#fff'
	  		})
	  		var $a =document.createElement('pie');
	  		$a.setAttribute("href",result);
	  		$a.setAttribute("download","");
	  		$a.click();
	  	},
	  	//清空
	  	clearQuery(){
	  		this.conditions.projectId=null;
	  		this.conditions.startTime=null;
	  		this.conditions.endTime=null;
	  		this.loadData();
	  	},
	  	showInfo(row){
	  		this.dialogInfoVisible=true;
	  		this.showInfoData=row;
	  	},
	  	getDate(dateString) {
	  		return new Date(dateString).toLocaleDateString();
	  	},
	  	getTime(dateString){
	  		let date = new Date(dateString);
	  		return date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
	  	},
	  	formatDate(row, column, cellValue) {
	  		return cellValue > 0 ? this.getDate(cellValue)+" "+this.getTime(cellValue) : '';
	  	},
	  	loadProject(){
	  		this.$http.get("/project/queryAllPro").then(resp=>{
	  			console.log(resp.data)
	  			if(resp.data.statusCode==200){
	  				this.projects=resp.data.data;
	  			}else{
	  				this.projects=[];
	  			}
	  		})
	  	},
	  	loadData(){
	  		this.$http.post("/defectInfo/findStatisticsBySeverity",this.conditions).then(resp=>{
	  			if(resp.data.statusCode==200){
	  				this.returnData=resp.data.data;
	  				this.sum=0;
	  				for(let index in this.returnData){
	  					this.sum=this.sum+this.returnData[index].value;
	  				}
	  				for(let index in this.returnData){
	  					let data =  this.returnData[index];
	  					this.returnData[index].name=data.name+"("+((data.value/this.sum)*100).toFixed(2)+"%)";
	  				}
	  				this.pie();
	  			}
	  		})
	  	}
	  
	 
  },
  created(){
  	this.loadProject();
  },
  mounted() {
  	this.loadData();
  }
  
}
</script>
<style>
	
</style>

